<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="/WEB-INF/tlds/messageTag.tld" prefix="msg"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title><msg:message key="menu.data" /></title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="renderer" content="webkit">
	<meta name="description" content="数据">
	<!-- <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"> -->
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" />
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/home_v1.css?t=1.0">
	
	<!-- 底部加载js -->
	<script src="${pageContext.request.contextPath }/js/jquery-1.12.4.min.js"></script>
	<!-- 图表控件 -->
	<script src="${pageContext.request.contextPath}/js/layer/layer.js"></script>
	<script src="${pageContext.request.contextPath }/js/page/common.js"></script>
    <script src="${pageContext.request.contextPath}/js/echarts4.common.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/My97DatePicker/WdatePicker.js"></script>
    <script src="${pageContext.request.contextPath}/js/home.js?v=1.2"></script>
	
	<style>
    * {padding: 0; margin: 0;}
    .left {float: left;}
    .right {float: right;}
    .clear {clear: both;}
    </style>
    
	<script type="text/javascript">
	// 天的x坐标
    var dateX = ${xData_workCount};
    
    var Ydata1 = ${yData_workCount};
    var Ydata2 = ${yData_chargeCount};
    var Ydata3 = ${yData_batteryQuantity};
    
    var tabx = ${xData_batteryVol};
    var tab1data1 = ${yData_chargeCurrent};
    var tab1data2 = ${yData_workCurrent};
    var tab2data1 = ${yData_batteryVol};
    var tab3data1 = ${yData_temperature};
    var tab4data1 = ${yData_solarPanelVol};
    
    function queryLightLatestStatus() {
    	
    	var lightId = $("#lightId").val();
    	if(lightId=="") {
    		return;
    	}
    	
    	// 获取路灯当前最新状态
    	$.ajax({
    		type : "POST",
    		url : "${pageContext.request.contextPath }/queryLightLatestStatus.do",
    		async: false,
    		dataType : "json",
    		data : {
    			lightId : lightId
    		},
    		success : function(data) {
    			if(data.success==0) {
    				$("#temperature").text(data.data.temperature);
    				$("#solarPanelVol").text(data.data.solarPanelVol);
    				$("#batteryVol").text(data.data.batteryVol);
    				$("#chargeCurrent").text(data.data.chargeCurrent);
    				$("#workCurrent").text(data.data.workCurrent);
    			}
    		}
    	});
    	
    	setTimeout(queryLightLatestStatus, 1000*60*15);
    }
	</script>

  </head>
  
  <body>
    <div class="header" style="min-width:1904px;">
		<div class="left header-logo"><img class="header-logo-img" src="images/header_logo.png" /></div>
		<div class="right header-nav">
			<a class="nav-link" href="${pageContext.request.contextPath }/main.do">
				<i class="icon icon-home"></i>
				<span class="link-text"><msg:message key="menu.homepage" /></span>
			</a>
			<c:if test="${menubean.menu1 }">
			<a class="nav-link" href="${pageContext.request.contextPath }/showDevice.do">
				<i class="icon icon-install"></i>
				<span class="link-text"><msg:message key="menu.install" /></span>
			</a>
			</c:if>
			<c:if test="${menubean.menu2 }">
			<a class="nav-link" href="${pageContext.request.contextPath}/showConfig.do">
				<i class="icon icon-config"></i>
				<span class="link-text"><msg:message key="menu.config" /></span>
			</a>
			</c:if>
			<c:if test="${menubean.menu3 }">
			<!-- <a class="nav-link" href="operation.html">
				<i class="icon icon-operation"></i>
				<span class="link-text">操作</span>
			</a> -->
			<a class="nav-link active" href="${pageContext.request.contextPath}/dataNew.do">
				<i class="icon icon-data"></i>
				<span class="link-text"><msg:message key="menu.data" /></span>
			</a>
			</c:if>
			<%-- <c:if test="${menubean.menu4 }">
			<a class="nav-link" href="history.html">
				<i class="icon icon-history"></i>
				<span class="link-text">历史</span>
			</a>
			</c:if> --%>
			<c:if test="${menubean.menu4 }">
			<a class="nav-link" href="${pageContext.request.contextPath}/faultList.do">
				<i class="icon icon-malfunction"></i>
				<span class="link-text"><msg:message key="menu.error" /></span>
			</a>
			</c:if>
			<c:if test="${menubean.menu5 }">
			<a class="nav-link" href="${pageContext.request.contextPath}/showUserList.do">
				<i class="icon icon-customer-management"></i>
				<span class="link-text"><msg:message key="menu.user" /></span>
			</a>
			</c:if>
			<c:if test="${menubean.menu6 }">
			<a class="nav-link" href="${pageContext.request.contextPath}/statusList.do">
				<i class="icon icon-status"></i>
				<span class="link-text"><msg:message key="menu.status" /></span>
			</a>
			</c:if>
			<c:if test="${menubean.menu7 }">
			<a class="nav-link" href="${pageContext.request.contextPath}/currentList.do">
				<i class="icon icon-malfunction"></i>
				<span class="link-text"><msg:message key="menu.current" /></span>
			</a>
			</c:if>
			<c:if test="${menubean.menu8 }">
			<a class="nav-link" href="${pageContext.request.contextPath}/report.do">
				<i class="icon icon-history"></i>
				<span class="link-text"><msg:message key="menu.report" /></span>
			</a>
			</c:if>
			<a class="nav-link" href="${pageContext.request.contextPath}/logout.do">
				<i class="icon icon-out"></i>
				<span class="link-text"><msg:message key="menu.exit" /></span>
			</a>
			<div class="clear"></div>
		</div>
		<div class="clear"></div>
	</div>

	<div class="aside-move-panel"></div>
	<div class="page-home-v1">
        <div class="left home-aside-p1">
            <div class="home-aside-v1">
                <div class="panel-title title-equipment">
                    <i class="icon icon-equipment"></i>
                    <span class="title-text">选择设备</span>
                </div>
                <div class="aside-div-v1">
                    <div class="aside-v1-cont">
                        <!-- li start -->
                    	<c:forEach items="${dtuBeanList}" var="dtuBean">
                        <div class="aside-li">
                            <div class="li-title">
                                <span class="li-text" <c:if test="${dtuBean.onlineState eq 1}">style="color:fb8821 !important;"</c:if>>${dtuBean.dtuName }</span>
                            </div>    
                            <div class="li-cont">
                            	<p class="list-title">灯杆编号</p>
                                <ul class="cont-list">
                                	<c:forEach items="${dtuBean.lightList }" var="lightBean">
                                    <li class="li-item" onclick="showData(${lightBean.lightId })">${lightBean.lightNum }</li>
                                    </c:forEach>
                                </ul>
                                <div class="cont-foot"><i class="icon-arrow"></i></div>
                            </div>
                        </div>
                        </c:forEach>
                        <!-- li end -->
                    </div>
                </div>
            </div>
        </div>
        <div class="left home-main-p1">
            <div class="home-main-v1">
                <div class="home-main-left left">
                    <div class="main-chart-v1">
                        <div class="main-head-v1">
                            <div class="panel-title title-date">
                                <i class="icon icon-date"></i>
                                <span class="title-text">选择日期</span>
                            </div>
                            <div class="main-form-v1">
                             	<form id="form1" action="${pageContext.request.contextPath }/dataNew.do" method="post">
			                    	<input type="hidden" id="lightId" name="lightId" value="${lightId }"/>
			                   
	                                <select class="select left mr-20" id="dateSelect" name="dateSelect">
	                                    <option value="0" <c:if test="${time eq 0 }">selected="selected"</c:if>><msg:message key='data.date.today' /></option>
	                                    <option value="1" <c:if test="${time eq 1 }">selected="selected"</c:if>><msg:message key='data.date.oneweek' /></option>
	                                    <option value="2" <c:if test="${time eq 2 }">selected="selected"</c:if>><msg:message key='data.date.onemonth' /></option>
	                                </select>
                                </form> 
                                <!-- <input type="text" class="left text mr-20" id="dateInput" /> -->
                                <div class="left my-date" id="myDate"></div>

								<div class="weather-div-v1 left" style="margin-top:-15px">
									<iframe style="width:300;height:60;" scrolling="no" frameborder="0" src="http://i.tianqi.com/index.php?c=code&id=12&icon=0&num=3"></iframe>
								</div> 
								
                                <!-- <div class="weather-div-v1 left">
                                    <div class="left">
                                        <div class="li-item">
                                            <img src="images/data/temperature@2x.png" alt="">
                                            ：0-11℃
                                        </div>
                                        <div class="li-item">
                                            <img src="images/data/wind @2x.png" alt="">
                                            ：4级 西风
                                        </div>
                                        <div class="li-item">
                                            <img src="images/data/position@2x.png" alt="">
                                            ：扬州 邗江区
                                        </div>
                                    </div>        
                                    <div class="left type-img">
                                        <img src="images/data/wet@2x.png" alt="">
                                    </div>
                                    <div class="clear"></div>
                                </div> -->
                                <div class="clear"></div>
                            </div>
                        </div>

                        <div class="left-chart-cont">
                            <div class="left-chart-child" id="leftChartCont"></div>
                        </div>
                    </div>
                </div>

                <div class="home-main-right left">
                    <div class="show-data-div">
                        <div class="panel-title title-date">
                            <i class="icon icon-date"></i>
                            <span class="title-text">实时数据</span>
                            <span class="title-tip">(每15分钟更新)</span>
                        </div>
                        <div class="show-data-cont">
                            <div class="left">
                                <div>
                                    <div class="left li-item row1-1">
                                        <div class="main-text"><span id="chargeCurrent">1200</span><sup>MA</sup></div>
                                        <div class="info-text">充电电流</div>
                                    </div>
                                    <div class="left li-item row1-2">
                                        <div class="main-text"><span id="batteryVol">16</span><sup>V</sup></div>
                                        <div class="info-text">电池电压</div>
                                    </div>
                                    <div class="clear"></div>
                                </div>
                                <div>
                                    <div class="left li-item row2-1">
                                        <div class="main-text"><span id="workCurrent">360</span><sup>MA</sup></div>
                                        <div class="info-text">放电电流</div>
                                    </div>
                                    <div class="left li-item row2-2">
                                        <div class="main-text"><span id="temperature">27</span><sup>℃</sup></div>
                                        <div class="info-text">电池温度</div>
                                        <div class="clear"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="left li-item row-right">
                                <div class="main-text"><span id="solarPanelVol">20</span><sup>v</sup></div>
                                <div class="info-text">太阳板电压</div>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>

                    <div class="function-chart">
                        <div class="panel-title title-function">
                            <i class="icon icon-date"></i>
                            <span class="title-text">选择功能</span>
                        </div>
                        <div class="toggle-nav" id="rightChartNav">
                            <a href="javascript:;" class="tab-link active" data-id="1">充电电流 / 放电电流</a>
                            <a href="javascript:;" class="tab-link" data-id="2">电池电压</a>
                            <a href="javascript:;" class="tab-link" data-id="3">电池温度</a>
                            <a href="javascript:;" class="tab-link" data-id="4">太阳板电压</a>
                        </div>
                        <div id="rightChartDiv" class="right-chart-cont"></div>
                    </div>

                </div>
                <div class="clear"></div>
            </div>
        </div>
        <div class="clear"></div>
    </div>
  </body>
</html>
